<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>帮助好友报名参加 ${template.template!}</title>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/js/modules/h5/css/css.css">
    <script src="${request.contextPath}/statics/js/modules/h5/js/jquery-1.8.3.min.js"></script>
      <script>
         
          function GetQueryString(name) {
              var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
              var r = window.location.search.substr(1).match(reg);
              if (r != null) return (r[2]); return null;
          }
          function checkForm() {
              var company = document.getElementById("company").value;
              if (company == "") {
                  alert("请填写公司");
                  return false;
              }
              var zhiwu = document.getElementById("zhiwu").value;
              if (zhiwu == "") {
                  alert("请填写职务");
                  return false;
              }
              var email = document.getElementById("email").value;
              if (email == "") {
                  alert("请填写邮箱");
                  return false;
              }
              var mobile = document.getElementById("mobile").value;
              if (mobile.length!=11) {
                  alert("请填写手机号");
                  return false;
              }
              var name = document.getElementById("name").value;
              if (name == "") {
                  alert("请填写姓名");
                  return false;
              }

          }
          function getCheckboxByName(name) {
              var value = document.getElementsByName(name);
              var values = "";
              for (var i = 0; i < value.length; i++) {
                  if (value[i].checked) {
                      values += value[i].value;
                      values += ",";
                  }
              }

              if (values.length > 0) {
                  values = values.substring(0, values.length - 1);
              }
              return values;
          }


          function bianhua()
          {
             
              var a = document.getElementById("name").value;

              document.getElementById("wz").value = document.getElementById("wz").value.replace("XXX",a);

          }
    </script>
</head>

<body>

<!--header start-->
    
<style>
        ul,ul li{ list-style:none; margin:0px; padding:0px;color:#2d889b;}
    *{font-family:Microsoft Yahei; margin:0px; padding:0px; color:#2d889b;}
    a:hover{ text-decoration:none;color:#2d889b;}
    .sy_four .nei .a:hover,.sy_six .ul li h1 a:hover,.sy_six .amore:hover,.sy_nine .left a:hover,.footer_one li h1 a:hover,.footer_one li p a:hover,.footer_four .right a:hover{ color:#39F}
.zc_three li .btn_next:hover,.zc_three li .btn_yzm:hover,.ll_one li .btn:hover,.dy_one li .btn:hover{ background:#2d889b;}
     /* page1 */
.page1{ width:1030px; margin:0 auto; }
.page1 ul{ float:left; width:100%; margin-bottom:60px;}
.page1 ul li{ float:left; width:430px; margin:0px 40px; margin-top:50px;}
.page1 ul li a{ float:left; width:95%; height:87px; border-radius:100px; border:1px solid #2d889b; border-left:0px; background:#E8E8E8; text-align:center; font-size:32px; color:#2d889b; line-height:34px; padding-top:15px; padding-right:5%}
.page1 ul li a img{ float:left; margin-top:-15px;}
.page1 ul li a span{ font-size:18px;color:#2d889b}
.page1 ul li a.sel{ background:#2d889b; color:#fff;}
.page1 ul li a.sel span{ color:#fff;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
	.page1{ width:90%; margin-left:5%; float:left;}	
	.page1 ul li{ width:44%; margin:0px 3%; margin-top:40px;}
	.page1 ul li a{ height:60px; padding-top:10px; font-size:20px; line-height:26px;}
	.page1 ul li a span{ font-size:15px;}
	.page1 ul li a img{ height:70px; margin-top:-10px;}
}
@media (max-width: 767px) {/* 手机 */
	.page1{ width:70%; margin-left:15%; float:left; padding-top:0px; padding-bottom:0;}	
	.page1 ul li{ width:100%; margin:0px; margin-top:20px;}
	.page1 ul li a{ height:47px; padding-top:7px; font-size:16px; line-height:20px;}
	.page1 ul li a span{ font-size:12px;}
	.page1 ul li a img{ height:54px; margin-top:-7px;}
	.page1 ul{ margin-bottom:0}
}
 /* 注册 zc */
.zc_main{ width:680px; margin:0px auto;}
.zc_one{ float:left; width:100%; padding:30px 0px; text-align:center; font-size:34px; color:#2d889b; line-height:30px;}
.zc_one span{ font-size:21px;color:#2d889b;}
.zc_two{ float:left; width:100%; border-bottom:1px solid #2d889b; text-align:center;}
.zc_two li{ display:inline-block; width:200px; height:70px; text-align:center; line-height:70px; border:1px solid #2d889b; border-bottom:0px; margin:0px 10px; color:#2d889b; font-size:24px; border-top-left-radius:20px; border-top-right-radius:20px; background:#E8E8E8; cursor:pointer;}
.zc_two li.sel{ background:#2d889b; color:#E8E8E8}
.zc_two li.sel a i{ color:#E8E8E8;font-family:Microsoft Yahei; }
.zc_three{ float:left; width:88%; margin-left:6%; padding:40px 0px;}
.zc_three li{ float:left; width:100%; padding:15px 0px;}
.zc_three li span{ float:left; line-height:60px; color:#2d889b; font-size:24px; padding-right:10px;}
.zc_three li .txt{ border:1px solid #2d889b; padding-left:70px; float:left; height:60px; line-height:60px; font-size:20px;}
.zc_three li .txt::-webkit-input-placeholder {color:#E8E8E8;}
.zc_three li .txt:-moz-placeholder {color:#E8E8E8;}
.zc_three li .txt::-moz-placeholder {color:#E8E8E8;}
.zc_three li .txt:-ms-input-placeholder {color:#E8E8E8}
.zc_three li .txt_tell{ float:left; width:396px; background:url(../images/bg_01.png) no-repeat left center;}
.zc_three li .txt_yzm{ float:left; width:196px; background:url(../images/bg_02.png) no-repeat left center;}
.zc_three li .txt_xin{ float:left; width:196px; background:url(../images/bg_03.png) no-repeat left center;}
.zc_three li .img_yzm{ float:left; margin-left:20px; height:60px;}
.zc_three li .btn_yzm{ float:left; margin-left:20px; background:#2d889b; height:62px; line-height:62px; cursor:pointer; color:#fff; font-size:20px; width:180px;}
.zc_three li .btn_next{ float:left; width:100%; height:60px; line-height:60px; background:#2d889b; color:#fff; font-size:20px; cursor:pointer;}

.zc_four{ float:left; width:100%; border-top:1px solid #2d889b; padding:20px 0px; text-align:center; color:#2d889b; font-size:20px; line-height:30px;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
	.zc_one{ font-size:30px;}
	.zc_one span{ font-size:18px;}
	.zc_two li{ height:60px; line-height:60px; font-size:20px;}
}
@media (max-width: 767px) {/* 手机 */
	.zc_main{ float:left; width:90%; margin-left:5%}
	.zc_one{ font-size:20px; line-height:20px; padding:20px 0px;}
	.zc_one span{ font-size:12px;}
	.zc_two li{ height:36px; line-height:36px; font-size:14px; width:110px; margin:0px 10px;border-top-left-radius:10px; border-top-right-radius:10px; }
	.zc_three{ float:left; width:100%; margin:0px; padding:20px 0px;}
	.zc_three li{ width:100%; padding:9px 0px;}
	.zc_three li span{ float:left; width:25%; font-size:14px; padding:0; line-height:40px;}
	.zc_three li .txt{line-height:40px; height:40px; font-size:13px;}
	.zc_three li .txt_tell{  width:64%; padding-left:10%; background:url(../images/bg_01.png) no-repeat -10px center; background-size:40px;}
	.zc_three li .txt_yzm{ width:35%; padding-left:10%; background:url(../images/bg_02.png) no-repeat 0px center; background-size:24px;}
	.zc_three li .img_yzm{ margin:0px; width:25%; float:right; height:40px;}
	.zc_three li .txt_xin{ width:35%; padding-left:10%; background:url(../images/bg_03.png) no-repeat -4px center; background-size:32px;}
	.zc_three li .btn_yzm{ width:27%; float:right; height:42px; line-height:42px; font-size:13px; margin:0px;}
	.zc_three li .btn_next{ height:40px; line-height:40px; font-size:14px;}
	.zc_four{ font-size:13px; line-height:22px; padding:10px 0px;}
	.zc_four img{ width:20px;}
}

      /* 联络信息 ll */
.main{ width:680px; margin:0px auto;}
.ll_one{ float:left; width:100%; padding:30px 0px;}
.ll_one li{ float:left; width:100%; padding-top:20px; line-height:60px; font-size:22px; color:#2d889b;}
.ll_one li span{ float:left; width:15%; font-size:22px; color:${template.colorBg!};}
.ll_one li .txt{ float:left; width:81%; padding-left:3%; border:1px solid ${template.colorBg!}; line-height:60px; font-size:22px; color:${template.colorBg!};}
.ll_one li .txt::-webkit-input-placeholder {color:#E8E8E8;}
.ll_one li .txt:-moz-placeholder {color:#E8E8E8;}
.ll_one li .txt::-moz-placeholder {color:#E8E8E8;}
.ll_one li .txt:-ms-input-placeholder {color:#E8E8E8}
.ll_one li label{ cursor:pointer; margin-right:30px;; color:#2d889b;}
.ll_one li label input{ width:20px; height:20px;}
.ll_one li .txt3{ width:16%}
.ll_one li .txt2{ width:38.5%; margin:0px 2%;}
.ll_one li .select{ float:left; border:1px solid #2d889b; line-height:60px; font-size:22px; color:#2d889b; height:60px; margin-right:10px; width:26%; padding:0px 5px;}
.ll_one li .sel_qu{ width:29.5%; margin-right:0}
.ll_one .li,.dy_one .li{ text-align:center;}
.ll_one li .btn,.dy_one li .btn,.tx_four .btn{ height:60px; font-size:22px; background:${template.colorBg!}; color:#fff; padding:0px 25px;}
@media (max-width: 767px) {/* 手机 */
	.main{ width:92%; margin-left:4%; float:left;}
	.ll_one{ padding:0px; padding-top:10px; padding-bottom:20px;}
	.ll_one li { padding-top:10px; line-height:36px; font-size:14px;}
	.ll_one li span{ font-size:14px; line-height:36px; width:18%;}
	.ll_one li .txt{ height:36px; line-height:36px; font-size:14px; width:77.5%; padding-left:3.5%;}
	.ll_one li label input{ width:15px; height:15px; float:left; margin-top:10px; margin-right:4px;}
	.ll_one li label{margin-right:15px; float:left;}
	.ll_one li .txt3{ width:15%}
	.ll_one li .txt2{ width:34.5%; margin:0px 1.5%;}
	.ll_one li .select{ height:36px; line-height:36px; font-size:14px; width:26%; margin-right:1%}
	.ll_one li .sel_qu{ width:28%; margin-right:0}
	.ll_one li .btn,.dy_one li .btn,.tx_four .btn{ padding:0px 20px; height:40px; line-height:40px; font-size:14px;}
}
      
/* 调研信息 dy */
.dy_one{ float:left; padding-top:40px; width:90%; margin-left:5%;}
.dy_one li{ float:left; width:100%; padding-bottom:40px;}
.dy_one li .top{ float:left; width:100%; background:#E8E8E8;color:#2d889b; font-size:24px; line-height:60px;}
.dy_one li .top i{ float:left; width:60px; height:60px; text-align:center; line-height:60px; background:#2d889b; font-size:48px; color:#E8E8E8; font-style:inherit; border-right:10px solid #fff;}
.dy_one li .top span{ padding-left:15px;;color:#2d889b;}
.dy_one li .bottom{ float:left; width:100%; padding-top:15px;}
.dy_one li label{ float:left; width:110%; line-height:50px; font-size:20px; color:#2d889b; cursor:pointer;}
.dy_one li label input{ width:24px; height:24px; float:left; margin-left:100px; margin-top:14px; margin-right:10px;}
.dy_one li .btn{ width:40%; margin:0px 20px;background:#2d889b;color:#fff;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
	.dy_one li .top{ line-height:50px; font-size:20px;}
	.dy_one li .top i{ height:50px; width:50px; line-height:50px; font-size:36px}
	.dy_one li label{ font-size:20px; line-height:44px; width:100%}
	.dy_one li label input{ width:20px; height:20px;}
	.dy_one li .btn{ font-size:20px; line-height:50px; height:50px;}
}
@media (max-width: 767px) {/* 手机 */
	.dy_one{ width:100%; margin-left:0%; padding-top:20px;}
	.dy_one li{ padding-bottom:20px;}
	.dy_one li .top{ line-height:40px; font-size:15px;}
	.dy_one li .top i{ height:40px; width:40px; line-height:40px; font-size:26px; border-right:5px solid #fff;}
	.dy_one li .top span{ padding-left:10px;}
	.dy_one li label{ font-size:20px;font-size:12px; line-height:20px; width:100%}
	.dy_one li label input{width:14px; height:14px; margin-left:50px; margin-top:3px; margin-right:5px; float:left; margin-bottom:10px;}
	.dy_one li .btn{ margin:0px 5px; width:45%; padding:0px; font-size:13px;}
}

  /* 我的 wd */
.wd_one{ float:left; width:80%;  background:#2d889b; border-radius:20px; margin:50px 10%;}
.wd_one h5{ float:left; font-weight:normal; font-size:14px; letter-spacing:20px;margin:0px; line-height:76px; color:#fff; text-align:center; width:100%}
.wd_one .img{ float:left; width:100%; text-align:center;}
.wd_one .img img{ width:80%;}
.wd_one .bottom{ float:left; width:100%; text-align:center; padding:15px 0px; color:#fff; font-size:24px; line-height:40px; letter-spacing:3px;}
.wd_two{ float:left; width:100%; margin-left:0%; margin-bottom:20px;}
.wd_two li{ float:left; width:42%; margin-left:5%; margin-bottom:25px;}
.wd_two li a{ float:left; width:92%; padding-right:8%; text-align:center; border:1px solid ${template.colorBg!}; height:55px; border-radius:100px; border-left:0px; color:${template.colorBg!}; font-size:24px; line-height:22px; padding-top:15px; background:#E8E8E8;}
.wd_two li a img{ float:left; margin-top:-16px;}
.wd_two li a span{ font-size:13px;color:${template.colorBg!};}
.wd_two li a.sel{ color:#fff; background:#2d889b}
.wd_two li a.sel span{ color:#fff;}
.wd_three{ float:left; width:100%; text-align:center; padding-bottom:15px; color:${template.colorBg!}; font-size:24px; padding-top:20px;}
.txt_wd{ float:left; width:92%; border:1px solid ${template.colorBg!}; border-radius:20px; padding:20px 4%; height:240px; line-height:40px; font-size:18px; color:${template.colorBg!}; margin-bottom:40px; outline:none;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
	.wd_one{ width:60%; margin:30px 20%;}
	.wd_one h5{ letter-spacing:8px; font-size:14px; line-height:60px;}
	.wd_one .bottom{ font-size:20px; line-height:30px; padding:15px 0px;}
}
@media (max-width: 767px) {/* 手机 */
	.wd_one{ width:90%; margin:30px 5%;}
	.wd_one h5{ letter-spacing:4px; font-size:12px; line-height:50px;}
	.wd_one .bottom{ font-size:14px; line-height:20px; padding:6px 0px;}
	.wd_two li{ width:90%; margin:0px; margin-left:5%; margin-bottom:20px; padding:0px;}
	.wd_two li a{ height:42px; width:92%; padding-top:8px; font-size:18px; line-height:18px; padding-right:8%;}
	.wd_two li a img{ height:50px; margin-top:-8px;}
	.wd_two li a span{ font-size:12px;}
	.wd_three{ font-size:16px; padding-bottom:10px; padding-top:10px;}
	.txt_wd{ width:92%; padding:10px 4%; font-size:13px; line-height:24px; height:140px;}
}
   .qd_one{ float:left; width:83%; margin:20px 0px; margin-left:5%; border:1px solid #2d889b; padding:10px 3.5%; text-align:center;}
.qd_one img{max-width:100%; border-radius:20px;}

.dq_two{ float:left; width:100%; padding-top:35px; background:url(../images/bg_04_1.png) no-repeat top center; background-size:auto 25px; color:#2d889b; font-size:12px; padding-bottom:20px; line-height:20px; text-align:center;}
.qd_three{ float:left; width:100%; text-align:center; padding-bottom:20px;}
.qd_three .btn{ height:34px; background:#2d889b; color:#fff; font-size:14px; width:35%; margin:0px 10px;}
   /* 邀请 yq */
.yq_one{ float:left; width:100%; padding-top:80px; text-align:center; color:#2d889b; font-size:28px; line-height:60px; letter-spacing:6px; padding-bottom:10px;}
.yq_two{ color:#2d889b;float:left; width:100%; background:url(images/bg_04.png) no-repeat top center; height:200px; font-size:32px; text-align:center; line-height:36px;}
.yq_two span{ color:#2d889b;font-size:18px; letter-spacing:3px;}
.yq_three{color:#2d889b; float:left; width:100%; text-align:center; line-height:70px; font-size:36px; letter-spacing:3px;}
.yq_four{ color:#2d889b;float:left; width:80%; margin-left:10%; margin-top:40px; border:1px solid #2d889b; border-radius:20px; padding-bottom:200px;}
.yq_four .top{ color:#2d889b;float:left; width:100%; padding-top:40px; line-height:40px; font-size:27px; letter-spacing:24px; text-align:center; padding-bottom:30px;}
.yq_four .top span{ color:#2d889b;font-size:15px; letter-spacing:3px}
.yq_four .img{ float:left; width:100%; text-align:center;}
.yq_four .img img{ width:50%}
.yq_four .bottom{color:#2d889b; float:left; width:100%; text-align:center; font-size:14px; line-height:30px; letter-spacing:3px;}

.yq_five{ color:#2d889b;float:left; width:90%; margin-left:5%; background:url(images/bg_05.png) no-repeat left top; background-size:100%; height:360px; margin-top:-200px; text-align:center; font-size:28px; letter-spacing:15px; line-height:40px; padding-top:20px;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
	.yq_one{ padding-top:60px; font-size:24px; line-height:50px;}
	.yq_two span{ font-size:16px;}
	.yq_three{ font-size:32px; line-height:60px;}
}
@media (max-width: 767px) {/* 手机 */
	.yq_one{ padding-top:10px; font-size:15px; line-height:20px; letter-spacing:3px;}
	.yq_two{ height:90px; background-size:auto 100%; font-size:20px; line-height:22px;}
	.yq_two span{ font-size:12px; letter-spacing:1px;}
	.yq_three{ font-size:15px; line-height:24px; margin-top:10px; letter-spacing:2px;}
	.yq_four { padding-bottom:100px; width:84%; margin-left:8%; margin-top:10px;}
	.yq_four .top{ font-size:16px; letter-spacing:10px; padding-top:10px; line-height:24px; padding-bottom:5px;}
	.yq_four .top span{ font-size:12px;}
	.yq_four .img img{ width:50%}
	.yq_four .bottom{ font-size:12px; letter-spacing:1px;}
	.yq_five{width:100%; margin:0px; margin-top:-100px; font-size:16px; padding-top:10px; line-height:22px; letter-spacing:5px; height:210px; background-size:100%;}
}
  /* 头像 tx */
.tx_one{ float:left; width:100%; padding-top:80px; text-align:center;}
.tx_one img{ max-width:55%; border-radius:400px;}
.tx_two{ float:left; width:100%; text-align:center; line-height:80px; font-size:24px; color:#2d889b; margin:0px; font-weight:normal;}
.tx_three{ float:left; width:80%; margin-left:10%; line-height:30px; color:#2d889b; font-size:16px; padding-bottom:40px;}
.tx_four{ float:left; width:100%; text-align:center; padding-bottom:60px;}
.tx_four .btn{ width:40%;background:#2d889b; color:#fff;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
	.tx_four .btn{ width:60%;}
}
@media (max-width: 767px) {/* 手机 */
	.tx_one img{ max-width:36%; border-radius:400px;}
	.tx_one{ padding-top:15px;}
	.tx_two{ line-height:40px; font-size:15px;}
	.tx_three{ width:100%; padding:0px; margin:0px; font-size:12px; line-height:20px; padding-bottom:15px;}
	.tx_four{ padding-bottom:20px;}
	.tx_four .btn{ width:45%}
}
/* 新加页面的css样式 */
.dy_one .bottom .txt_yj{ float:left; width:78%; border:1px solid #2d889b; height:120px; line-height:30px; font-size:20px; margin-left:100px; padding-left:2%; padding-top:8px; padding-bottom:8px;}
.dy_one .bottom .txt_sm{ height:30px; line-height:30px; margin-top:10px;}
@media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
}
@media (max-width: 767px) {/* 手机 */
	.dy_one .bottom .txt_yj{ margin-left:50px; height:80px; font-size:14px; line-height:26px;}
.dy_one .bottom .txt_sm{ height:32px; line-height:32px; margin-top:10px; padding:0px; padding-left:3%; font-size:13px;}
}
</style>
<div class="header">
    <img src="${template.headImgPc!}" class="img_pc" />
    <img src="${template.headImg!}" class="img" />
</div>
<!--header end-->

<!--main start-->
<div class="main">
     <form method="post" action="doHelp?id=${id!}&tid=${tid!}&ly=${ly}" id="f1">

	<ul class="ll_one">
    	<li>
        	<span>公司：</span>
            <input name="company" type="text" id="company" value="${company!}" class="txt" placeholder="必填信息" />
        </li>
    	<li>
        	<span>姓名：</span>
            <input name="name" type="text" id="name" value="${name!}" onchange="bianhua()" class="txt" placeholder="必填信息" />
        </li>
    	<li>
        	<span>职务：</span>
            <input name="zhiwu" type="text" id="zhiwu" value="${zhiwu!}"  class="txt" placeholder="必填信息" />
        </li>
    	<li>
        	<span>手机：</span>
            <input name="mobile" type="text" id="mobile" class="txt" value="${mobile!}" placeholder="必填信息" />
        </li>
    	<li>
        	<span>邮箱：</span>
            <input name="email" type="text" id="email" class="txt" value="${email!}"  placeholder="必填信息" />
        </li>
	    <li class="li">
             <input type="submit" name="Button1" value="保存信息并继续" onclick="return checkForm();" id="Button1" class="btn" />
        </li>
	</ul>
        </form>
	<div class="wd_three">邀请短信预览</div>
    <textarea class="txt_wd" readonly="readonly" id="wz">【金诺会展】XXX您好，您的朋友${member.col3!}已经为您成功申请 ${template.template!}VIP观众入场证件。您可通过关注公众号“机加小诸葛”访问底部菜单：入场登记-报到凭证找回，查看您的签到二维码。</textarea>
	
    <ul class="wd_two">
   <li style="display:none">
        	<a href="">
            	<img src="${request.contextPath}/statics/js/modules/h5/images/img9.png">
                我的邀请函<br>
                <span>Invitation</span>
            </a>
        </li>
    	<li style="">
        	<a href="invite?id=${id!}&tid=${tid!}&ly=${ly!}">
            	<img src="${request.contextPath}/statics/js/modules/h5/images/img10.png">
                邀请好友体验<br>
                <span>SMS invitation</span>
            </a>
        </li>
    	<!--<li style="">
        	<a href="help?id=${id!}&tid=${tid!}&ly=${ly!}">
            	<img src="${request.contextPath}/statics/js/modules/h5/images/img11.png">
                帮助好友注册<br>
                <span>Help him register</span>
            </a>
        </li>-->
    	<li style="display:none">
        	<a href="">
            	<img src="${request.contextPath}/statics/js/modules/h5/images/img12.png">
                会后调查问卷<br>
                <span>Questionnaire</span>
            </a>
        </li>
    </ul>
</div>
<!--main end-->

<!--footer start-->
    
<footer>
    <img src="${template.footImgPc!}" class="img_pc" />
    <img src="${template.footImg!}" class="img" />
</footer>
<!--footer end-->
<script>
    var msg = "${msg!}";
    if(msg.length>0){
        alert(msg);
    }
</script>

</body>
</html>
